<template>
	<view class="tabbar-container flex items-center">
		<!-- isRound是中间凸出样式的标志，用来判断当前子级是否是凸出样式的 -->
		<view :class="[item.isRound ? 'is-square' : 'square']" v-for="(item, index) in tabbarList" :key="index"
			@click="tabbarChange(index, item)">
			<!-- 不是凸出的子级 -->
			<template v-if="!item.isRound">
				<view class="item-top flex justify-center items-center flex-col">
					<!-- 角标显示 -->
					<u-badge
						v-if="item.pagePath === '/pages/tabBar/pit-avoidance/pit-avoidance' && totalUnreadCount > 0"
						:value="totalUnreadCount" max="99" :isDot="false" type="error"
						customStyle="position: absolute;z-index:1000; top: -5rpx; right: -30rpx;"></u-badge>

					<!-- 使用 <text> 标签渲染字体图标 -->
					<!-- <text :class="['tabbarIconFont', 'tab-icon',active === index ? 'active' : '', active === index ? item.selectedIconPath : item.iconPath]"></text> -->
					<view class="tabbar-image">
						<image :src="active === index ? item.selectedIconPath : item.iconPath"
							:class="['tab-icon', active === index ? 'active' : '']" mode="scaleToFill"></image>
					</view>
				</view>
				<view class="item-bottom" :class="[active === index ? 'active' : '']">
					<text>{{ item.text }}</text>
				</view>
			</template>
			<!-- 凸出的子级 -->
			<!-- <template v-else>
				<view class="flex justify-center center-round">
					<u-image class="round-button" :src="active == index ? item.selectedIconPath : item.iconPath"
						:width="item.width" :height="item.height"></u-image>
					<text :class="[active === index ? 'round-active text' : 'text']">{{ item.text }}</text>
				</view>
			</template> -->
			<template v-else>
				<view class="flex justify-center center-round">
					<view class="publish-container">
						<view class="publish-large-image" :style="{ transform: `rotate(${publishRotationAngle}deg)` }">
							<!-- 创建一个2x1的图片矩阵，上下各一张图片 -->
							<image :src="item.iconPath"
								:class="['publish-image', 'top-image', { 'wiggle': shouldWiggle && publishRotationAngle % 360 === 0 }]">
							</image>
							<image :src="item.selectedIconPath"
								:class="['publish-image', 'bottom-image', 'pre-rotated', { 'wiggle-reverse': shouldWiggle && publishRotationAngle % 360 === 180 }]">
							</image>
						</view>
					</view>
					<text :class="[active === index ? 'round-active text' : 'text']">{{ item.text }}</text>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		name: 'Tabbar',
		props: {
			tabbarIndex: {
				type: Number,
				default: 0
			},
			scrolled: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			scrolled: {
				handler(newVal) {
					// 修改第一个 tab 的文本
					if (newVal) {
						this.tabbarList[0].text = '回顶部';
						this.tabbarList[0].selectedIconPath = '/static/tabbar/goBackTop.png';
					} else {
						// 恢复原始文本
						this.tabbarList[0].text = '本地';
						this.tabbarList[0].selectedIconPath = '/static/tabbar/home-active.png';
					}
				},
				immediate: true // 立即执行
			}
		},
		data() {
			return {
				// tabbar列表
				tabbarList: [{
						pagePath: "/pages/index/index",
						iconPath: "/static/tabbar/home.png",
						selectedIconPath: "/static/tabbar/home-active.png",
						text: "本地",
						isRound: false
					},
					// {
					// 	pagePath: "/pages/pit-avoidance/pit-avoidance",
					// 	iconPath: "icon-bikeng",
					// 	selectedIconPath: "icon-bikeng-active",
					// 	text: "避坑",
					// 	isRound: false
					// },
					{
						pagePath: "/pages/local-guide/local-guide",
						iconPath: "/static/tabbar/Local-guide.png",
						selectedIconPath: "/static/tabbar/Local-guide-acitve.png",
						text: "本地向导",
						isRound: false
					},
					{
						pagePath: "/pages_sub/release/release/release",
						iconPath: "/static/tabbar/fabu-add.png",
						selectedIconPath: "/static/tabbar/fabu-logo.png",
						text: "发布",
						width: '70rpx',
						height: '70rpx',
						isRound: true
					},
					{
						pagePath: "/pages/time-axis/time-axis",
						iconPath: "/static/tabbar/travelogue.png",
						selectedIconPath: "/static/tabbar/travelogue-acitve.png",
						text: "游•记",
						isRound: false
					},
					{
						pagePath: "/pages/user/user",
						iconPath: "/static/tabbar/my.png",
						selectedIconPath: "/static/tabbar/my-active.png",
						text: "我的",
						isRound: false
					},
				],
				active: 0,
				rotationInterval: null, // 旋转定时器
				publishRotationAngle: 0, // 发布按钮旋转角度
				shouldWiggle: false, // 控制晃动动画
				wiggleTimeout: null // 晃动定时器
			}
		},
		computed: {
			...mapState('im', ['totalUnreadCount']),
		},
		mounted() {
			this.active = this.tabbarIndex;
			if (this.$store.state.hasLogin) {
				this.$store.dispatch('im/fetchTotalUnreadCount');
			}
			// 启动发布按钮的定时旋转
			this.startPublishRotation();
		},
		methods: {
			startPublishRotation() {
				this.rotationInterval = setInterval(() => {
					// 直接旋转188度
					this.publishRotationAngle += 180;

					// 在旋转完成后触发晃动，并在晃动结束时回到180度的倍数
					setTimeout(() => {
						this.shouldWiggle = true;

						// 晃动结束后回到180度的倍数位置
						setTimeout(() => {
							this.shouldWiggle = false;
							// 计算最近的180度倍数位置
							const nearest180 = Math.round(this.publishRotationAngle / 180) * 180;
							this.publishRotationAngle = nearest180;
						}, 1000); // 晃动持续0.5秒
					}, 800); // 等待旋转完成
				}, 3000);
			},
			tabbarChange(index, item) {
				if (item.isRound) {
					// 【修改点】将原来的 uni.showActionSheet 替换为触发全局事件
					uni.$emit('togglePublishPopup');
				} else if (item.text == '回顶部') {
					this.$emit('goToTop');
				} else {
					uni.switchTab({
						url: item.pagePath
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 修改晃动动画的应用方式 */
	.publish-image.wiggle {
		animation: wiggle 0.7s ease-in-out;
	}

	.publish-image.wiggle-reverse {
		animation: wiggle-reverse 0.7s ease-in-out;
	}

	@keyframes wiggle {
		0% {
			transform: rotate(0deg);
		}

		15% {
			transform: rotate(8deg);
		}

		30% {
			transform: rotate(-6deg);
		}

		45% {
			transform: rotate(4deg);
		}

		60% {
			transform: rotate(-2deg);
		}

		75% {
			transform: rotate(1deg);
		}

		100% {
			transform: rotate(0deg);
		}
	}

	@keyframes wiggle-reverse {
		0% {
			transform: rotate(180deg);
		}

		15% {
			transform: rotate(188deg);
		}

		30% {
			transform: rotate(174deg);
		}

		45% {
			transform: rotate(184deg);
		}

		60% {
			transform: rotate(178deg);
		}

		75% {
			transform: rotate(181deg);
		}

		100% {
			transform: rotate(180deg);
		}
	}

	.justify-center {
		justify-content: center;
	}

	.flex {
		display: flex;
	}

	.items-center {
		align-items: center;
	}

	.flex-col {
		flex-direction: column;
	}

	// .tabbar-image {
	// 	width: 45rpx;
	// 	height: 45rpx;
	// 	position: relative;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;

	// 	image {
	// 		width: 45rpx;
	// 		height: 45rpx;
	// 	}
	// }
	.tabbar-image {
		width: 45rpx;
		height: 45rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 45rpx;
			height: 45rpx;
			transition: transform 0.3s ease; // 添加过渡动画
			transform-origin: center bottom; // 设置旋转中心为底部中心
		}

		.rotatable {
			transform-origin: center bottom; // 确保旋转中心为底部中心
		}
	}

	.tabbar-container {
		width: 100%;
		position: fixed;
		z-index: 999;
		bottom: 0;
		left: 0; // 确保左侧对齐
		right: 0; // 确保右侧对齐
		background: #F6F5F5; // 将背景色移到外层容器
		box-shadow: 0px -5rpx 10rpx rgba(0, 0, 0, 0.07);

		/* --- 核心修改 --- */
		/* 1. 使用 box-sizing: border-box; */
		box-sizing: border-box;

		/* 2. 动态计算总高度 = 内容高度 + 安全区域高度 */
		height: calc(102rpx + constant(safe-area-inset-bottom));
		height: calc(102rpx + env(safe-area-inset-bottom));

		/* 3. 设置底部内边距，将内容向上推 */
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		/* --- 修改结束 --- */

		// 修改：内部的 flex 容器不再需要背景色，让它透明以显示父容器的背景
		.flex {
			display: flex;
			align-items: center;
			height: 102rpx; // 保证内容区域的高度是固定的 102rpx
		}

		.square {
			width: 100%;
			height: 100%;
			background: transparent; // 背景透明
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.item-bottom {
				font-weight: 500;
				margin-top: 10rpx;
				font-size: 26rpx;
				color: #6A6A75;
				transition: color 0.2s;
			}

			.active {
				color: #EF852F;
			}
		}

		.square .item-top {
			width: 45rpx;
			height: 45rpx;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.is-square {
			width: 100%;
			height: 102rpx;
			background: #F6F5F5;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			justify-content: center;
		}

		.center-round {
			width: 100rpx;
			height: 100%;
			position: relative;
			top: -20rpx;

			.publish-container {
				position: absolute;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 70rpx;
				/* 图片宽度 */
				height: 70rpx;
				/* 只显示一张图片的高度 */
				overflow: hidden;
				/* 关键：隐藏超出容器的部分 */
				background-color: #EF852F;
				border-radius: 50%;
			}

			.publish-large-image.wiggle {
				animation: wiggle 0.5s ease-in-out;
			}

			.publish-large-image {
				position: absolute;
				top: 0;
				left: 0;
				width: 70rpx;
				height: 140rpx;
				transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
				transform-origin: 35rpx 70rpx;

				/* 旋转中心点：x为宽度一半，y为整体高度一半 */
			}

			.publish-image {
				position: absolute;
				width: 70rpx;
				height: 70rpx;
			}

			.top-image {
				top: 0;
				left: 0;
			}

			.bottom-image {
				bottom: 0;
				left: 0;
			}

			.bottom-image.hidden {
				display: none;
			}

			.pre-rotated {
				transform: rotate(180deg);
				border-radius: 50%;
			}


			/* 【重要修改】创建标准的、向上凸起的半圆 */
			&::before {
				content: '';
				position: absolute;

				// 定位
				top: -20rpx; // 调整top值以适应更大的半圆
				left: 50%;
				transform: translateX(-50%);

				// 【核心修改】尺寸：高度设为宽度的一半，形成标准半圆
				width: 120rpx; // 半圆的直径
				height: 60rpx; // 半圆的半径

				// 形状：顶部两个角的圆角半径等于自身高度（或宽度的一半），形成完美的半圆形
				border-top-left-radius: 60rpx;
				border-top-right-radius: 60rpx;

				// 颜色：与tabbar背景色一致
				background-color: #F6F5F5;

				// 阴影：同样使用 drop-shadow 以贴合弧形边缘
				filter: drop-shadow(0 -4rpx 8rpx rgba(0, 0, 0, 0.07));

				// 堆叠顺序
				z-index: -1;
			}

			.round-button {
				position: absolute;
				top: 0;
				z-index: 1; // 确保按钮在伪元素之上
			}
		}

		.text {
			font-weight: 500;
			font-size: 26rpx;
			color: #6A6A75;
			position: absolute;
			bottom: -10rpx;
		}

		.tab-icon {
			font-size: 45rpx;
			line-height: 1;
			color: #DFDCD9;
			transition: color 0.2s;
		}

		.active .tab-icon {
			color: #EF852F;
		}
	}
</style>